<!--司机端交货步骤的物流中转表单页-->
<template>
  <div class="gridContainer">
    <div class="m-det-warp mb30">
      <div class="m-det-tit">业务单号：{{BbMain.BBillNo}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">制单时间</span>
            <div class="flex1 value">{{BbMain.BillDate | time}}</div>
          </li>
          <li class="displayflex">
            <span class="label">收货地址</span>
            <div class="flex1 value">{{PoMain.ArrivalProvince | province}}{{PoMain.ArrivalCity | city}}{{PoMain.ArrivalDistrict | district}}{{PoMain.ArrivalAddress}}</div>
          </li>
          <li class="displayflex">
            <span class="label">总件数</span>
            <div class="flex1 value"><em class="red">{{BbMain.Pkgs}}</em>件</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-det-warp mb30" v-if="logList[0].length > 0">
      <div class="m-det-tit">物流交接</div>
      <div class="m-det-list">
        <div class="yl_ipt_bor">
          <input id="RPName" type="text" placeholder="请输入物流公司" v-model="selectedText">
          <div class="iconfont icon-search" @click="showPopupPicker = true"></div>      
        </div>
        <popup-picker :show.sync="showPopupPicker" :show-cell="false" :data="logList" v-model="selectedCarrier" @on-change="setText"></popup-picker>
        <div class="yl_ipt_bor">
          <input placeholder="请输入物流单号" v-model="TracingNo" type="text">
        </div>
        <div class="yl_ipt_bor">
          <input placeholder="请输入车辆车牌号" v-model="RPPlateNumber" type="text">
        </div>
      </div>
    </div>

    <uploader :title="'中转凭证上传'" :img-list="imgList" :max="9"></uploader>
    <!--footer start-->
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex" v-if="logList[0].length > 0">
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l" @click="Confirm()">确认</li>
        </ul>
      </div>
    </div>
    <!--footer end-->
  </div>
</template>

<script>
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components: {
    uploader,
  },
  data: function() {
    return {
      BbMain: {},
      PoMain: {},
      Vehicle: {},
      BbDetailList: [],
      TracingNo: '',
      RPPlateNumber: '',
      imgList: [],
      Rpguid:'',

      showPopupPicker:false,
      selectedText: '',
      selectedCarrier:[],
      logList:[[]]
    };
  },
  computed:{
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null;
    }
  },
  created(){
    this.getData();
  },
  methods: {
    getData() {
      var query = {
        Guid: this.$route.query.Guid,
        QueryType: "Tracing",
      }
      this.Ajax.post('GetOrderDetail', query).then((res) => {
        if(res.IsSuccess) {
          this.BbMain = res.Data.BbMain;
          this.PoMain = res.Data.PoMain;
          this.Vehicle = res.Data.Vehicle;
          this.VehicleDetail = res.Data.VehicleDetail;

          this.getCarrier();
        } else {
          this.Toast({ message: res.ErrorMessage || '出错了，请刷新重试'});
        }
      }).catch(e => {
        console.log(e);
        this.Toast({ message: '出错了，请刷新重试'});
      });
    },

    getCarrier() {
      var query = {
        CorpGuid: this.userinfo.CorpGuid
      }
      this.Ajax.post('SearchCarrier', query).then((res) => {
        if (res.IsSuccess) {
          if (res.Datas.length > 0) {
            res.Datas.forEach(x => {
              if(x.Guid != this.userinfo.BelongGuid) {
                let item = {
                  name: x.ChineseName,
                  value: x.Guid,
                }
                this.logList[0].push(item);
              }
            });
          }
        } else {
          this.Toast({
            message: '发生错误，请刷新重试'
          });
        }
      }).catch(e => {
        console.log(e);
        this.Toast({
          message: '发生错误，请刷新重试'
        });
      });
    },

    setText(e){
      let arg = e[0];
      this.selectedText = this.logList[0].find(x => {
        return x.value == arg;
      }).name;
    },

    Confirm() {
      var RPname = this.selectedText;
      if (RPname == undefined || RPname == null || RPname == '') {
          this.Toast({
            message: '请输入物流公司名称！',
          });
          return false;
      }
      
      this.Rpguid = '';
      for(var i = 0; i < this.logList[0].length; i++){
        const dt = this.logList[0][i];
        if(dt.name == RPname)
        {
          this.Rpguid = dt.value;
        }
      }

      var query = {
        Guid: this.Vehicle.Guid,
        BBillNo: this.BbMain.BBillNo,
        imgurla: this.imgList,
        RPPlateNumber: this.RPPlateNumber,
        TracingNo: this.TracingNo,
        RPName: RPname,
        Rpguid: this.Rpguid,
        rowNo: this.VehicleDetail[0].RowNo,
        PRContactsTel: this.userinfo.MobileNo,
        BelongGuid: this.userinfo.BelongGuid,
      };
      // console.log(query)
      this.Ajax.post('CarrierTransfer', query).then((res) => {
        if (res.IsSuccess) {
          this.Toast({
            message: '物流中转录入成功',
          });
          this.$router.replace({
            path: '/carrier/transitlist'
          });
        } else {
          this.Toast({
            message: resp.data.ErrorMessage || '出现错误，请刷新重试',
          });
        }
      }).catch(e => {
        console.log(e);
        this.Toast({
          message: '出现错误，请刷新重试',
        });
      });
    },
  },
};
</script>